<script setup>

</script>

<template>
  <div>
    <el-card class="box-card flex-row-center" shadow="hover">
      <div class="flex-col-center">
        <el-icon>
          <CirclePlus/>
        </el-icon>
        <div class="text">添加公众号</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{ padding: '20px',width:'100%'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Position/>
          </el-icon>
          任务宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Bell/>
          </el-icon>
          消息宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{ padding: '20px',width:'100%'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Position/>
          </el-icon>
          任务宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Bell/>
          </el-icon>
          消息宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{ padding: '20px',width:'100%'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Position/>
          </el-icon>
          任务宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Bell/>
          </el-icon>
          消息宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{ padding: '20px',width:'100%'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Position/>
          </el-icon>
          任务宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Bell/>
          </el-icon>
          消息宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{ padding: '20px',width:'100%'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Position/>
          </el-icon>
          任务宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Bell/>
          </el-icon>
          消息宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{ padding: '20px',width:'100%'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Position/>
          </el-icon>
          任务宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Bell/>
          </el-icon>
          消息宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>

    <el-card class="box-card box-item" shadow="hover" :body-style="{ padding: '20px',width:'100%'}">
      <div class="item flex-row-center">
        <el-avatar size="large"
                   src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'></el-avatar>
      </div>
      <div class="item flex-row-center">路飞小课</div>
      <div class="item flex-row-center">
        <div class="flex-row-between" style="width: 100px;font-size: 12px;">
          <div style="color: gray">服务号</div>
          <div style="color: #0c8eff">已认证</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Position/>
          </el-icon>
          任务宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
      <div class="item small flex-row-between">
        <div style="display: inline-flex;align-items: center;">
          <el-icon>
            <Bell/>
          </el-icon>
          消息宝
        </div>
        <div class="date">2020-11-11到期</div>
      </div>
    </el-card>


  </div>
</template>

<style scoped>
.box-card {
  width: 240px;
  height: 260px;
  float: left;
  margin: 20px;
}

.box-item {
  display: flex;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box-card .text {
  font-size: 14px;
  margin-top: 8px;
}

.box-item .item {
  padding: 2px 0;
}

.box-item .small {
  font-size: 14px;
  padding: 8px 0;
  color: #646464;
}

.box-item .date {
  font-size: 13px;
  color: #908e8e;
}

.box-item .icon {
  font-size: 50px;

}
</style>